<script setup>
// 这个练习是一个简单的 Vue 3 组件，使用了 ref 和 computed 方法来分别创建一个响应式的数据属性
//  message 和基于 message 计算出一个新的数据属性 reversedMessage。在模板中渲染 message 
//  并提供一个「反转消息」的按钮来更新 message 的值为其反转后的结果，
//  同时展示 reversedMessage 的值以展示更新结果。
/* import {ref,computed} from 'vue'
const msg = ref('');
// {}:多条语句带大括号， 明确return
const reMsg = computed(()=> msg.value.split('').reverse().join('')); */
import {ref,computed} from 'vue'
import MyButton from './components/icons/MyBtt.vue';

const num=ref(0);

</script>

<template>
<!-- <MyButton v-model:num="num"></MyButton> -->
<!-- {{num}} -->
<!-- <input type="text" v-model="msg"> -->
<!-- <button @click="onClick">反转</button> -->
<!-- {{ reMsg }} -->
<MyButton></MyButton>
<br>
<div class="box">
  Friday
</div>
<h1></h1>
</template>

<!-- css样式  全局样式 
加了scoped会生成   data-v-7a7a37b1  随机字符串表名只在当前组件中生效
-->
<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: darkcyan;
}
:deep(h1){
  color: yellow;
}
</style>

<style>

</style>

